<script setup>
import {reactive, ref} from "vue";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";
import {StarFilled} from "@element-plus/icons-vue";

let data = reactive(({
  // 所有的表单数据由它装入
  form:{},
  taskList:[],
  queryTaskList:[],
  dialogDelVisible:false,
  // 省份信息
  redisValuesForProvinceList:[],
  // 城市信息
  redisValuesForCityList:[],
  // 市区信息
  redisValuesForDistrictList:[],
  // 调度信息
  taskForm:{},
  // 所有的公司信息
  companyList:[],
  // 指定公司里的所有查勘人员
  dispatchList:[],
  total:0,
  pageNum:1,
  pageSize:3,
}));

/*
获取报案数据
 */
const queryAll = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(data.form))
  // http://localhost:8080
  uu.post("/busClaimReport/pageListPro",data.form).then(result =>{
    data.taskList = result.data.list;
    data.pageNum = result.data.pageNum;
    data.pageSize = result.data.pageSize;
    data.total = result.data.total;
    console.log("接收到的数据为"+JSON.stringify(result.data));
    // console.log(result);
  })
}
// 查询
queryAll()
 /*
 获取要处理的报案中的数据
  */
const queryTask = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(data.form))
  // http://localhost:8080
  uu.get("/busDispatchInfo/queryTask",{
    params:{
      dispatchId:2, // 暂时写死，后续再改
    }
  }).then(result =>{
    data.queryTaskList = result.data;
    console.log("接收到的数据为"+JSON.stringify(result.data));
    // console.log(result);
  })
}
queryTask();


/*
  改变页数
 */
const pagesChange = (value) => {
  // alert(value)
  //  console.log(value)
  data.pages = value;
  queryAll();
}

/**
 * 查询所有的省份地区信息
 */
const getProvinces = () => {
  // 省份都存在位于 0 的 Hash 类型的key下
  uu.get("/hupRegion/getAreaForRedis/0").then(result =>{
    if (result.code === 200){
      // alert(JSON.stringify(result.data))
      console.log("数据信息为"+JSON.stringify(result.data))
      data.redisValuesForProvinceList = result.data;
    }
    console.log(result.message)
  })
}
getProvinces()
/**
 * 查询所有的城市地区信息
 */
const getCitys = () => {
  if (data.form.province != null){
    if (data.form.province === ''){ // 这里是为了对应传递来空值时的判断，因为在清空输入信息时会再次触发一次事件
      return;
    }else {
      // 清除上一次查询后的残留数据
      data.redisValuesForCityList = [];
      // alert(data.form.provinceId)
      // 城市地区都存在位于 省份 的 Hash 类型的key下
      uu.get("/hupRegion/getAreaForRedis/"+data.form.province).then(result =>{
        if (result.code === 200){
          // alert(JSON.stringify(result.data))
          console.log("数据信息为"+JSON.stringify(result.data))
          data.redisValuesForCityList = result.data;
        }
        console.log(result.message)
      })
    }
  }else {
    ElMessage.error("查询所有的城市地区信息失败，传入方法的省份key为空")// 显示失败提示
  }
}
/*
查询所有的区级地区信息
 */
const getDistricts = () => {
  if (data.form.city != null){
    if (data.form.city === '') { // 这里是为了对应传递来空值时的判断，因为在清空输入信息时会再次触发一次事件
      return;
    }else {
      // 清除上一次查询后的残留数据
      data.redisValuesForDistrictList = [];
      // 区级地区都存在位于 具体城市 的 Hash 类型的key下
      uu.get("/hupRegion/getAreaForRedis/"+data.form.city).then(result =>{
        if (result.code === 200){
          // alert(JSON.stringify(result.data))
          console.log("数据信息为"+JSON.stringify(result.data))
          data.redisValuesForDistrictList = result.data;
        }
        console.log(result.message)
      })
    }

  }else {
    ElMessage.error("查询所有的区级地区信息失败，传入方法的市级key为空")// 显示失败提示
  }
}

/**
 *  任务拉取
 */
const selectTask = (claimReportId) => {
  // let id = row.claimReportId+'';
  data.form.claimReportId=claimReportId // 调度员目前是假数据，可能后续会牵扯到权限
  data.form.dispatchId=2
  uu.put("/busDispatchInfo/selectTask",data.form).then(result =>{
    if (result.code === 200){
      ElMessage({
        message:result.message,
        type:"success",
      })
      data.form = {}
      queryAll()
      queryTask()
    }else {
      ElMessage.error(result.message)// 显示失败提示
    }
  })
}

/*
  撤销指派任务
 */
const backoutTask = (claimReportId) => {
  data.form.claimReportId = claimReportId;
  if (data.form.claimReportId !=null || data.form.claimReportId != '') {
    uu.put("/busDispatchInfo/backoutTask/" + data.form.claimReportId).then(result => {
      if (result.code === 200) {
        ElMessage({
          message: result.message,
          type: "success",
        })
        data.form = {}
        queryAll()
        queryTask()
      } else {
        ElMessage.error(result.message)// 显示失败提示
      }
    })
  }else {
    ElMessage.error("撤销指派任务事件无法正常执行，claimReportId 为空或空串")// 显示失败提示
  }
}

/**
 *  开启任务指派对话框时事件
 */
const openDesignate = (row) => {
  // 开启对话框
  data.dialogDelVisible= true;
  // 获取报案号
  data.taskForm.claimReportId = row.claimReportId;
}

/*
关闭任务指派对话框时事件
 */
const dialogDelVisible = () => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  ruleFormRef.value.resetFields();
  // 关闭对话框
  data.dialogDelVisible= false;
  data.taskForm = {};
}
/**
 * 查询所有的公司信息
 */
const queryAllCompany = () => {
  uu.get("/hupCompany/queryAllCompany").then(result =>{
    if (result.code === 200){
      // alert(JSON.stringify(result.data))
      console.log("数据信息为"+JSON.stringify(result.data))
      data.companyList = result.data;
    }
    console.log(result.message)
  })
}
queryAllCompany();
/*
查询到具体的调度人
 */
const getDDispatch = () => {
  // data.companyId
  if (data.companyId !=null || data.companyId != ''){
    uu.get("/busDispatchInfo/selectCompanyById",{
      params:{
        companyId:data.taskForm.companyId
      }
    }).then(result =>{
      if (result.code === 200){
        // alert(JSON.stringify(result.data))
        console.log("数据信息为"+JSON.stringify(result.data))
        data.dispatchList = result.data;
      }
      console.log(result.message)
    })
  }else {
    ElMessage.error("查询到具体的调度人事件执行失败，companyId值为空或空串")// 显示失败提示
  }
}
/**
 *  添加指派信息
 */
const addDispatch = (ruleFormRef) => {
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      data.taskForm.dispatchId=2 // 调度员目前是假数据，可能后续会牵扯到权限
      uu.post("/busDispatchInfo/addDispatch/",data.taskForm).then(result =>{
        if (result.code === 200){
          ElMessage({
            message:result.message,
            type:"success",
          })
          data.form = {}
          queryAll()
          queryTask()
          dialogDelVisible();
        }else {
          ElMessage.error(result.message)// 显示失败提示
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
// 添加保单验证规则
const ruleFormRef = ref(); // 引用表单组件
const rules = reactive({  // 验证规则对象，存储验证规则。
  surveyorId: [
    { required: true, message: '请选择调度人', trigger: 'change' },
  ],
  remark: [
    { required: true, message: '请填写备注', trigger: 'blur' },
  ],
})
</script>

<template>
  <el-form :inline="true" :model="data.form" class="demo-form-inline" style="width: 100%">
    <!-- 便捷查询区域-->
    <div>
      <el-form-item label="报案号">
        <el-input v-model="data.form.claimReportId"  placeholder="请输入报案号"/>
      </el-form-item>
      <!--    省市区   省选择完去查询所有的市    -->
      <el-form-item
          label="省份"
          prop="provinceId">
        <el-select
            v-model="data.form.province"
            clearable
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            @change="getCitys()"
            placeholder="请选择省份">
          <el-option v-for="item in data.redisValuesForProvinceList"  :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!--   城市选择完去查询所有的市区       -->
      <el-form-item label="城市" prop="cityId">
        <el-select
            v-model="data.form.city"
            clearable
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            @change="getDistricts()"
            placeholder="请选择城市">
          <el-option v-for="item in data.redisValuesForCityList"  :label="item.name"  :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="市区" prop="districtId">
        <el-select
            v-model="data.form.district"
            clearable
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            placeholder="请选择市区">
          <el-option v-for="item in data.redisValuesForDistrictList"  :label="item.name"  :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll()">报案信息查询</el-button>
      </el-form-item>
    </div>
  </el-form>
  <!-- 报案信息表格区域 -->
  <el-table :data="data.taskList" border style="width: 100%; " >
    <el-table-column label="序号" type="index" fixed width="80" height="100" />
    <el-table-column label="报案号" prop="claimReportId" fixed width="200" height="100" />
    <el-table-column label="保单号" prop="policyNumber" width="120" />
    <el-table-column label="联系人" prop="contactPerson" width="120" />
    <el-table-column label="联系电话" prop="contactPhone" width="120" />
    <el-table-column label="报案出险原因" prop="causeOfLoss" width="120" />
    <el-table-column label="报案出险地址" prop="lossAddress" width="120" />
    <!--      <el-table-column label="报案方式" prop="reportMethod" width="120" />-->
    <el-table-column label="报案方式" prop="reportMethod" width="150" >
      <template #default="scope">
        <el-text :label="0" v-model="scope.row.reportMethod" v-if=" scope.row.reportMethod ===0">现场报案</el-text>
        <el-text :label="1" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===1">电话报案</el-text>
        <el-text :label="2" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===2">app报案</el-text>
        <el-text :label="3" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===3">其他</el-text>
      </template>
    </el-table-column>
    <el-table-column label="受损标的" prop="damagedSubject" width="120" />
    <el-table-column label="报损数量" prop="damageQuantity" width="120" />
    <el-table-column label="报案时间" prop="reportTime" width="120" />
    <el-table-column label="出险时间" prop="lossTime" width="120" />
    <el-table-column label="受灾信息编号" prop="disasterInfoId" width="120" />
    <el-table-column label="操作" fixed="right" width="150" >
      <template #default="scope">
        <!-- 点击开启对话框 -->
        <el-button
            size="small"
            type="success"
            @click="selectTask(scope.row.claimReportId)"
        >拉取任务
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <div style="width: 100%">
    <br>
    <el-pagination
        v-model:current-page="data.pageNum"
        v-model:page-size="data.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="disabled"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="pagesChange($event)"
        @current-change="pagesChange($event)"
    />
  </div>
  <br>
  <!-- 分割线 -->
  <el-divider>
    <el-icon><star-filled /></el-icon>
  </el-divider>
  <br>
  <h3>我的任务（指派中）</h3>
  <!-- 我的任务（指派中)表格区域 -->
  <el-table :data="data.queryTaskList" border style="width: 100%; " >
    <el-table-column label="序号" type="index" fixed width="80" height="100" />
    <el-table-column label="报案号" prop="claimReportId" fixed width="200" height="100" />
    <el-table-column label="保单号" prop="policyNumber" width="120" />
    <el-table-column label="联系人" prop="contactPerson" width="120" />
    <el-table-column label="联系电话" prop="contactPhone" width="120" />
    <el-table-column label="报案出险原因" prop="causeOfLoss" width="120" />
    <el-table-column label="报案出险地址" prop="lossAddress" width="120" />
    <!--      <el-table-column label="报案方式" prop="reportMethod" width="120" />-->
    <el-table-column label="报案方式" prop="reportMethod" width="150" >
      <template #default="scope">
        <el-text :label="0" v-model="scope.row.reportMethod" v-if=" scope.row.reportMethod ===0">现场报案</el-text>
        <el-text :label="1" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===1">电话报案</el-text>
        <el-text :label="2" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===2">app报案</el-text>
        <el-text :label="3" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===3">其他</el-text>
      </template>
    </el-table-column>
    <el-table-column label="受损标的" prop="damagedSubject" width="120" />
    <el-table-column label="报损数量" prop="damageQuantity" width="120" />
    <el-table-column label="报案时间" prop="reportTime" width="120" />
    <el-table-column label="出险时间" prop="lossTime" width="120" />
    <el-table-column label="受灾信息编号" prop="disasterInfoId" width="120" />
    <el-table-column label="操作" fixed="right" width="150" >
      <template #default="scope">
        <!-- 点击开启指派对话框
                 -->
        <el-button
            @click="openDesignate(scope.row)"
            size="small"
            type="warning"
        >指派
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="backoutTask(scope.row.claimReportId)"
        >撤销
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 指派对话框 -->
  <el-dialog
      v-model="data.dialogDelVisible"
      title=" 请填写详细的指派信息" width="50%"
      :before-close="dialogDelVisible"
      draggable>
    <el-form
        :model="data.taskForm"
        ref="ruleFormRef"
        :rules="rules"
        label-width="140px">
      <el-form-item label="报案号" prop="claimReportId">
        {{data.taskForm.claimReportId}}
<!--        <el-input readonly style="width:240px" v-model="data.taskForm.claimReportId" />-->
      </el-form-item>
      <el-form-item label="选择查勘人员" prop="surveyorId">
<!--        <el-input style="width:240px" v-model="data.form.revokeReason" />-->
          <el-select
              v-model="data.taskForm.companyId"
              clearable
              filterable
              remote
              reserve-keyword
              remote-show-suffix
              @change="getDDispatch()"
              placeholder="请选择公司">
            <el-option v-for="item in data.companyList"  :label="item.name" :value="item.id" />
          </el-select>
        &nbsp; &nbsp;
          <el-select
              v-model="data.taskForm.surveyorId"
              clearable
              filterable
              remote
              reserve-keyword
              remote-show-suffix
              @change="getDDispatch()"
              placeholder="请选择查勘人员"
              >
            <el-option v-for="item in data.dispatchList"  :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      <el-form-item label="调度人员" prop="dispatcherId">
        张三
<!--        <el-input style="width:240px" v-model="data.taskForm.dispatcherId" />-->
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" style="width:63%" v-model="data.taskForm.remark" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogDelVisible()">取消</el-button>
        <el-button type="primary" @click="addDispatch(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <br>
  <el-empty description="" />
</template>

<style scoped>

</style>